<template>
<div class="swiperList">
     <swiper :options="swiperOption">
        <swiper-slide v-for="(item, index) in dataList" :key=index>
            <videos ref="videos" :index="index" :videoList="item"></videos>
             <div class="info_wrapper"><info></info> </div>
             <div class="right_bar_wrapper"><rb @changeCom="showCom"></rb> </div>
        </swiper-slide>
    </swiper>
        <transition name="up">
          <div class="comment_wrap" v-show="comentShow"> 
                <div class="comment_list">
                    <div class="comment_top">
                        <div class="number">10万条评论</div>
                        <div class="close" @click="close">X</div>
                    </div>
                    <div class="comment_body">
                        <div class="comment_box">
                            <div class="comment_item">
                                <div class="user-pic">
                                    <img src="../../assets/logo.png" alt="">
                                </div>
                                <div class="item-info">
                                    <div class="replay">
                                        <p class="name">前端切图仔</p>
                                        <p class="replay_dec">什么时候才是一个头啊，我也不知道该怎么办阿什么时候才是一个头啊，我也不知道该怎么办阿什么时候才是一个头啊，我也不知道该怎么办阿什么时候才是一个头啊，我也不知道该怎么办阿什么时候才是一个头啊，我也不知道该怎么办阿什么时候才是一个头啊，我也不知道该怎么办阿什么时候才是一个头啊，我也不知道该怎么办阿 <span class="time">2-19</span></p>
                                    </div>
                                    <div class="zan">
                                        <span class="iconfont iconaixinxiantiao"></span><p>200</p>
                                    </div>
                                </div>
                            </div>

                            <div class="comment_item">
                                <div class="user-pic">
                                    <img src="../../assets/logo.png" alt="">
                                </div>
                                <div class="item-info">
                                    <div class="replay">
                                        <p class="name">前端切图仔</p>
                                        <p class="replay_dec">什么时候才是一个头啊，我也不知道该怎么办阿什么时候才是一个头啊，我也不知道该怎么办阿什么时候才是一个头啊，我也不知道该怎么办阿什么时候才是一个头啊，我也不知道该怎么办阿什么时候才是一个头啊，我也不知道该怎么办阿什么时候才是一个头啊，我也不知道该怎么办阿什么时候才是一个头啊，我也不知道该怎么办阿 <span class="time">2-19</span></p>
                                    </div>
                                    <div class="zan">
                                        <span class="iconfont iconaixinxiantiao"></span><p>200</p>
                                    </div>
                                </div>
                            </div>

                            <div class="comment_item">
                                <div class="user-pic">
                                    <img src="../../assets/logo.png" alt="">
                                </div>
                                <div class="item-info">
                                    <div class="replay">
                                        <p class="name">前端切图仔</p>
                                        <p class="replay_dec">什么时候才是一个头啊，我也不知道该怎么办阿什么时候才是一个头啊，我也不知道该怎么办阿什么时候才是一个头啊，我也不知道该怎么办阿什么时候才是一个头啊，我也不知道该怎么办阿什么时候才是一个头啊，我也不知道该怎么办阿什么时候才是一个头啊，我也不知道该怎么办阿什么时候才是一个头啊，我也不知道该怎么办阿 <span class="time">2-19</span></p>
                                    </div>
                                    <div class="zan">
                                        <span class="iconfont iconaixinxiantiao"></span><p>200</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="reply_input">
                        <input type="text" placeholder="留下你精彩的评论">
                        <span class="iconfont iconpinglun"></span>
                        <span class="iconfont iconxiangji"></span>
                    </div>
                </div>
            </div>
        </transition>
          
  </div>
</template>

<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import info from '@/components/info'
import rb from '@/components/right_bar'
import videos from '../video'
export default {
    name: 'videoPlay',
    data(){
        return {
            comentShow: false,
            dataList: [
                    {
                    url: 'http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4',//视频源
                    cover: 'http://oss.jishiyoo.com/images/file-1575341210559.png',//封面
                    tag_image: 'http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449277018pF3XL.jpg',//作者头像
                    fabulous: false,//是否赞过
                    tagFollow: false,//是否关注过该作者
                    author_id: 1,//作者ID
                    author:'superKM',
                    des:'武汉加油'
                }, {
                    url: 'http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4',
                    cover: 'http://oss.jishiyoo.com/images/file-1575343195934.jpg',
                    tag_image: 'http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449298299M3V50.jpg',
                    fabulous: true,//是否赞过
                    tagFollow: false,//是否关注过该作者
                    author_id: 2,//作者ID
                    author:'superKM',
                    des:'中国加油'
                }, {
                    url: 'http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4',
                    cover: 'http://oss.jishiyoo.com/images/file-1575343262684.jpg',
                    tag_image: 'http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449277018pF3XL.jpg',
                    fabulous: false,//是否赞过
                    tagFollow: false,//是否关注过该作者
                    author_id: 1,//作者ID
                    author:'superKM',
                    des:'武汉加油'
                }, {
                    url: 'http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4',
                    cover: 'http://oss.jishiyoo.com/images/file-1575343508574.jpg',
                    tag_image: 'http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449277018pF3XL.jpg',
                    fabulous: false,//是否赞过
                    tagFollow: false,//是否关注过该作者
                    author_id: 1,//作者ID
                    author:'superKM',
                    des:'中国加油'
                }],
                page: 1,
            swiperOption: {
                    direction:"vertical",
                    grabCursor: true, 
                    setWrapperSize: true, 
                    autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
                    slidesPerView: 1,
                    mousewheel: true, 
                    mousewheelControl: true, 
                    height: window.innerHeight, // 高度设置，占满设备高度
                    resistanceRatio: 0, 
                    observeParents: true, 
                    on: {
                        tap: () => {
                            this.playAction(this.page-1)
                        },
                        slideNextTransitionStart:() => {
                        this.page += 1
                        this.nextVide(this.page -1)
                    },
                    slidePrevTransitionEnd: () => {
                        if(this.page > 1){
                            this.page -= 1
                            this.preVide(this.page-1)
                        }
                    }
                    },
                   
                },
        }
    },
    components: {
        swiper,
        swiperSlide,
        videos,
        info,
        rb
    },
    methods: {
        playAction(index){
           this.$refs.videos[index].palyOrStop()
        },
        nextVide(index){
            this.$refs.videos[index-1].stop()
            this.$refs.videos[index].play()
        },
         preVide(index){
            this.$refs.videos[index+1].stop()
            this.$refs.videos[index].play()
        },
        showCom(){
            this.comentShow = true
        },
        close(){
            this.comentShow = false
            
        }
       
    }
}
</script>
<style >
.up-enter-active, .up-leave-active{
    transition: all 0.5s;
}
.up-leave-to, .up-enter{
    opacity: 1;
    transform: translateY(100%)
}
 .info_wrapper{
    position: absolute;
    bottom: 40px;
    left: 10px;
    z-index: 999;
  }

  .right_bar_wrapper{
      position: absolute;
      /* z-index: 999; */
      bottom: 60px;
      right: 10px;
  }

  .comment_wrap{
      position: fixed;
      bottom: 0px;
      left: 0;
      max-height: 400px;
      width: 100%;
      background: #ffffff;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      z-index: 999;
      padding: 10px 10px;
      box-sizing: border-box;
  }
 .comment_top{
       display: flex;
       align-items: center;
   }
.number{
    flex: 1;
    text-align: center;
}
 .close{
    padding-right: 10px;
    font-size: 20px;
    color: #666;
}
.comment_body{
    max-width: 450px;
    height: 400px;
    padding-bottom: 50px;
    overflow: auto;
}
.comment_body .comment_item{
    display: flex;
}
.comment_body .comment_item .user-pic img{
    width: 33px;
    height: 33px;
    border-radius: 50%;
}
.item-info{
    display: flex;
    flex: 1 1 auto;
    margin-left: 10px;
}
.replay{
    width: 90%;
}
.replay_dec{
	word-break: break-all;
}
.replay .name{
    color:#666;
    font-size: 16px;
    margin-bottom: 10px;
}
.replay .time{
    color: #666;
}
.zan .iconfont{
    font-size: 25px;
    color: #cccc
}
.reply_input{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
}
.reply_input input{ width: 70%; line-height: 40px; border: 1px solid #000;}
.reply_input .iconfont{
    font-size: 30px;
    margin-left: 20px;
}
</style>